/*eslint-disable*/
import * as eCharts from 'echarts'
import { useRef, useEffect } from 'react';
import nowTime from 'nowTime';
type Date={
    value:number,
    name:string,
}
type money={
    theme:string,
    note:string,
    money:number,
}
type value={
    [date:string]:money;
}
type TProp={
    money:value[]
}
const PieChart = (props:TProp) => {
    const container:any= useRef(null)
    const chartDate:Date[]=[]

    props.money.map((items)=>{
        if(Object.keys(items)[0]===nowTime()){
            let a ={value:items[nowTime()].money,name:items[nowTime()].note}
            chartDate.push(a)
        }
       
    })
    useEffect(()=>{
        const myChart = eCharts.init(container.current);
        // let option:any = ;
          
        myChart.setOption({
            title: {
                // top:'5%',
                text: '今日收支',
              },
            tooltip: {
              trigger: 'item'
            },
            series: [
              {
                name: nowTime(),
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data:chartDate
              }
            ]
          });
        
    },[])

    return (<div ref={container} style={{width: 300,height: 300}}></div>)
}

export default PieChart